<template>
  <div class="pay-page">
    <!-- 状态 -->
    <el-steps :active=2 align-center finish-status="success" process-status="wait">
      <el-step title="确认商品"></el-step>
      <el-step title="提交订单"></el-step>
      <el-step title="支付订单"></el-step>
    </el-steps>
    <!-- 订单信息 -->
    <el-card shadow="never" style="margin-top: 20px;min-height: 300px;">
      <template #header>
        <el-row style="border-bottom:2px solid #66ccff;"></el-row>
      </template>
      <el-row :gutter="0" style="display: flex; justify-content: center; align-items: center;">
        <el-col :span="8" style="display: flex; justify-content: center; align-items: center;">
          <svg t="1716905103452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2548" width="100" height="100">
            <path
              d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m332.8 364.8l-371.2 371.2c-15.36 15.36-35.84 24.32-57.6 24.32-23.04 0-43.52-8.96-57.6-24.32l-179.2-179.2c-25.6-25.6-25.6-64 0-89.6s64-25.6 89.6 0L416 614.4 755.2 275.2c25.6-25.6 64-25.6 89.6 0s25.6 64 0 89.6z"
              fill="#18AF1A" p-id="2549"></path>
          </svg>
        </el-col>
        <el-col :span="8">
          <div class="info1">订单已提交，请尽快支付~</div>
          <div class="info2">下单后超过30分钟未支付将自动取消订单！</div>
        </el-col>
        <el-col :span="8" style="display: flex; justify-content: center; align-content: center;">
          <div class="total">
            <span style="color: #968f8f; font-size: 14px;">总金额: </span><span
              style="color: #ff0000; font-size: 20px;">￥{{
                aliPay?.totalAmount }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 支付方式选择 -->
    <el-row style="border-bottom: 2px solid #66ccff;">
      <h2 style="color: #66ccff;">选择以下支付方式付款</h2>
    </el-row>
    <el-card shadow="never">
      <template #header>
        支付平台
      </template>
      <el-row justify="center" style="margin-top: 10px;">
        <el-col :span="6" style="display: flex; justify-content: center; align-content: center;margin: 10px 5px;"
          v-for="( item, index) in payMethods" :key="index">
          <el-radio-group v-model="payMethod" fill="red" @change="pay(payMethod)">
            <el-radio-button :label="item.type" :disabled="disabledPay(item.type)">
              <el-image :src="item.img" lazy style="width: 150px;height: 50px;"></el-image>
            </el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
import { getUser } from "@/utils/storage";
import { proFilePath } from "../../utils/filePath";
import { mapMutations } from 'vuex'
export default {
  name: "Pay",
  data() {
    return {
      user: {},
      payMethods: [
        {
          type: 'zfb',
          label: '支付宝',
          img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png'

        },
        {
          type: 'wx',
          label: '微信',
          img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg'
        },
        {
          type: 'rmb',
          label: '数字人民币',
          img: 'https://www.wxhjic.com/UpLoadFile/20210513/211efc46-07d2-4e4d-8560-2cb25228274e.png'
        }
      ],
      payMethod: '',
      bands: [],
      filePath: proFilePath
    }
  },
  created() {
    this.user = getUser()
    if (!this.user) {
      this.$message({
        type: "warning",
        message: '请登录！'
      })
      return
    }
    this.load()
  },
  mounted() {
    if (!this.aliPay?.traceNo) {
      this.$message.error('支付已过期！')
      this.$router.go(-2)
    }
  },
  computed: {
    aliPay() {
      return this.$route.params.aliPay
    }
  },
  methods: {
    ...mapMutations('sCart', ['setSelectedList']),
    // 目前只支持支付宝
    pay(payMethod) {
      if (payMethod != 'zfb') {
        this.$message({
          type: 'warning',
          message: '暂仅支持支付宝付款'
        })
        return
      }
      window.open(`http://${this.filePath}:9999/alipay/pay?subject=${this.aliPay.subject}&traceNo=${this.aliPay.traceNo}&totalAmount=${this.aliPay.totalAmount}`)
    },
    load() {
      this.setSelectedList([])
    },
    disabledPay(type) {
      return !['zfb', 'wx'].includes(type)
    },
  }
}
</script>
<style scoped>
.info1 {
  font-size: 20px;
  color: #000;
}

.info2 {
  margin-top: 20px;
  font-size: 16px;
  color: #968f8f;
}

.total {
  font-size: 20px;
}
</style>
